<template>
  <div id="commonTable" class="commonTable">
    <el-table
      :data="data"
      :max-height="maxHeight"
      v-loading="tableLoading"
      border
      stripe
      tooltip-effect="light"
      @selection-change="handleSelectionChange"
    >
      <slot name="table_oper" />
      <template v-for="(item, index) in columns">
        <el-table-column
          v-if="item.show != false"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align ? item.align : 'center'"
          :width="item.width"
          :formatter="item.formatter ? item.formatter : formatterValue"
        >
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="data.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="text-align: center; margin: 20px 0"
      :current-page="page.pageNo"
      :page-size="page.limit"
      :page-sizes="page.sizes"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <div class="nodataLen" v-else>
      <div class="line"></div>
      <div class="nodataNum">共 &nbsp;0&nbsp;条</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Table, Pagination, TableColumn } from "element-ui";

Vue.use(Button);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);

export default {
  name: "commonTable",
  props: {
    columns: Array,
    data: Array,
    page: Object,
    maxHeight: {
      type: Number,
      default: 550,
    },
    tableLoading: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    if (!this.data.length) {
      this.$nextTick(() => {
        const _html = `<img src="/assets/images/nodata.png" width="44" height="44" /><em>暂无信息</em>`;
        $(".el-table__empty-text").html(_html);
      });
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    formatterValue(row, column, cellValue) {
      return cellValue;
    },
  },
};
</script>

<style lang="scss">
.commonTable :global {
  .el-pager li {
    min-width: 26px;
    color: #95a0a6;
  }

  .el-pager li.active {
    background: #1190ff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    color: #fff;
  }

  .el-table__body-wrapper {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .el-table__empty-text {
    text-align: center;
  }

  .el-table__empty-text em {
    display: inline-block;
    width: 100%;
    font-style: normal;
    color: #5e696e;
    font-size: 14px;
    clear: both;
    overflow: hidden;
  }

  .el-table__empty-text img {
    display: inline-block;
    width: 44px;
  }

  .el-table__empty-block {
    height: 400px !important;
  }
}

.nodataLen {
  clear: both;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.nodataLen .line {
  width: 100%;
  height: 5px;
  background: #fafafa;
}

.nodataLen .nodataNum {
  width: 100%;
  padding-top: 30px;
  color: #95a0a6;
  font-size: 12px;
  font-weight: 400;
  clear: both;
  overflow: hidden;
}
</style>